<template>
  <div id="app" v-bind:style="appDivStyle">
      <div class="context" ref="context">
           <div class="queryBox" ref="queryBox">
                <el-form :model="formQueryCondition"
                         ref="form" size="mini">
                    <!--统计时间-->
                  <el-row>
                    <el-col :span="5">
                    <el-form-item :label="$t('assetsWCount.queryLabel.statisticalTime')"  :label-width="queryformLabelWidth">
                        <el-date-picker v-model="formQueryCondition.statisticalTimeS.val" class="queryItemStyle" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                    </el-col>
                    <el-col :span="5" :offset="1">
                    <el-form-item :label="$t('assetsWCount.queryLabel.to')"  :label-width="queryformLabelWidth">
                        <el-date-picker v-model="formQueryCondition.statisticalTimeE.val" class="queryItemStyle" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                    </el-col>
                    <el-col :span="5" :offset="1">
                    <!--cp名称-->
                    <el-form-item :label="$t('assetsWCount.queryLabel.CPName')"   :label-width="queryformLabelWidth">
                        <el-input v-model.trim="formQueryCondition.providerName.val" class="queryItemStyle" clearable
                                  :placeholder="$t('assetsWCount.queryLabel.placeholderCPName')">
                        </el-input>
                    </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="24">
                    <div style="text-align:right">
                        <el-form-item>
                            <el-button v-permission="{menuCode:menuCode,resourceCode:'resetBtnText'}" type="primary" @click="onReset('form')">{{ $t('btnText.resetBtnText') }}</el-button>
                            <el-button v-permission="{menuCode:menuCode,resourceCode:'exportBtnText'}" type="primary" @click="onExport('exportBtnText')" icon="el-icon-download" :loading="loading">{{ $t('btnText.exportBtnText') }}</el-button>
                            <el-button v-permission="{menuCode:menuCode,resourceCode:'queryBtnText'}" type="primary" @click="onQuery('queryBtnText')" icon="el-icon-search" :loading="loading">{{ $t('btnText.queryBtnText') }}</el-button>
                        </el-form-item>
                    </div>
                    </el-col>
                  </el-row>
                </el-form>
            </div>
            <div class="dataBox" ref="dataBox">

                <transition enter-active-class="animated zoomIn" leave-active-class="animated rotateOut">
                    <el-table v-if="isInit" ref="singleTable"
                                :data="tableData"
                                :height="tableHeight"
                                @sort-change="sortChange"
                                v-loading="loading" size="mini"
                                style="width: 100%;" stripe=stripe border=border>
                        <el-table-column type="index"  width="50" fixed="left"
                                            :label="$t('table.xh')" align="center">
                        </el-table-column>
                        <el-table-column :label="$t('assetsWCount.queryLabel.statisticalTime')" min-width="180" sortable="custom"
                              prop="statisticsDate" sort-by="statisticsDate">
                        </el-table-column>
                        <el-table-column prop="sysProvider.providerName" min-width="110" fixed="left"
                                            :label="$t('assetsWCount.tableText.CPName')" sortable="custom" sort-by="sysProvider.providerName">
                        </el-table-column>
                        <el-table-column prop="tAssets" min-width="110" fixed="left"
                                            :label="$t('assetsWCount.tableText.totalAssets')" sortable="custom" sort-by="tAssets">
                        </el-table-column>
                        <el-table-column prop="tDuration" min-width="130"
                        :label="$t('assetsWCount.tableText.totalDuration')" sortable="custom" sort-by="tDuration">
                        </el-table-column>
                        <el-table-column prop="unaudQ" min-width="150"
                        :label="$t('assetsWCount.tableText.unauditedQuantity')" sortable="custom" sort-by="unaudQ">
                        </el-table-column>
                        <el-table-column prop="unaudD" min-width="110" sortable="custom"
                        :label="$t('assetsWCount.tableText.unauditedDuration')" sort-by="unaudD">
                        </el-table-column>
                        <el-table-column :label="$t('assetsWCount.tableText.auditedQuantity')" min-width="120" sortable="custom"
                                prop="audQ" sort-by="audQ">
                        </el-table-column>
                        <el-table-column :label="$t('assetsWCount.tableText.auditedDuration')" min-width="180" sortable="custom"
                              prop="audD" sort-by="audD">
                        </el-table-column>
                        <el-table-column :label="$t('assetsWCount.tableText.auditUnpassedQuantity')" min-width="180" sortable="custom"
                                prop="unpassQ" sort-by="unpassQ">
                        </el-table-column>
                        <el-table-column :label="$t('assetsWCount.tableText.auditUnpassedDuration')" min-width="180" sortable="custom"
                              prop="unpassD" sort-by="unpassD">
                        </el-table-column>
                        <el-table-column :label="$t('assetsWCount.tableText.wasteQuantity')" min-width="120" sortable="custom"
                                prop="wasteQ" sort-by="wasteQ">
                        </el-table-column>
                        <el-table-column :label="$t('assetsWCount.tableText.wasteDuration')" min-width="180" sortable="custom"
                              prop="wasteD" sort-by="wasteD">
                        </el-table-column>
                        

                    </el-table>
                </transition>

            </div>
        </div>
        <div class="pageBox">
            <el-pagination @size-change="sizeChange"
                            @current-change="currentPageChange"
                            :current-page="pager.curPage"
                            :page-sizes="pager.sizes"
                            :page-size="pager.curSize"
                            :background="true"
                            layout="total, sizes, prev, pager, next, jumper" :total="pager.total">
            </el-pagination>
        </div>


  </div>


</template>

<script>

import comBaseVue from '../../baseViewModel';

export default {
  mixins: [comBaseVue],
  name:'AssetsWarehouse',
  props:{
    menuCode:String
  },
  data () {

    return {
        isInit:false,
        tableHeight:100,
        appDivStyle:{
            height:this.$store.getters.appHeight,
        },
        modelName:"com.ispr.iptv.entity.audit.AssetsReportEntity",
        // 查询条件
        formQueryCondition: {
            statisticalTimeS: {
              key:'statisticsDate',
              group:'statisticalTimeS',
              val: new Date(), // 查询的值
              op:'>='
            },
            statisticalTimeE: {
              key:'statisticsDate',
              group:'statisticalTimeE',
              val: new Date(), // 查询的值
              op:'<='
            },
            providerName: {
              key:'sysProvider.providerName',
              val: "", // 查询的值
              op:'like'
            },
        },

    }
  },
  methods:{

     // 重置
    onReset:function(){
        if (this.$refs['form']) {
            this.$refs['form'].resetFields();
        }
        this.formQueryCondition.statisticalTimeS.val = new Date();
        this.formQueryCondition.statisticalTimeE.val = new Date();
        this.formQueryCondition.providerName.val = "";
    },

    // 导出按钮
      onExport:function onExport (rescode) {
      this.currentResCode = (rescode && rescode!=='') ? rescode : '';
      let param = { 'className': 'com.ispr.iptv.entity.audit.AssetsReportEntity', 'opKey': 'Export', 'params': this.queryObjToArray(this.formQueryCondition) , 'sort': [{ 'col': 'keyId', 'order': 'desc' }], 'fileName': '资产入库统计' };
      let fileName = '资产入库统计' + '.xlsx';
      this.downloadByIdOrName(this, '/file/export', 'param', JSON.stringify(param), fileName);
    },
    enterDown(){
      var g = this
      if(!g.loading){
        g.onQuery()
      }
    }

  },
  mounted: function mounted() {
    this.tableHeight = this.$refs.context.offsetHeight - this.$refs.queryBox.offsetHeight;
    this.isInit = true;
    this.onQuery();

  }
}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
